<template>
  <div>
    <Modal :title="L('Create')"
           :value="value"
           @on-ok="save"
           @on-visible-change="visibleChange">
      <Form ref="modelForm"
            label-position="left"
            :rules="rules"
            :model="model"
            :label-width="70">
        <FormItem label="分类">
          <RadioGroup v-model="model.type">
            <Radio :label="0">
              <Icon type="logo-apple"></Icon>
              <span>菜单</span>
            </Radio>
            <Radio :label="1">
              <Icon type="logo-android"></Icon>
              <span>字典</span>
            </Radio>
            <Radio :label="2">
              <Icon type="logo-windows"></Icon>
              <span>字典项</span>
            </Radio>
          </RadioGroup>
          {{model.type}}
        </FormItem>
        <FormItem label="父节点"
                  prop="parentId">
          <Input v-model="model.parentId"
                 :maxlength="32"
                 :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('Key')"
                  prop="key">
          <Input v-model="model.key"
                 :maxlength="32"
                 :minlength="2"></Input>
        </FormItem>
        <FormItem :label="L('Value')"
                  prop="value">
          <Input v-model="model.value"
                 :maxlength="32"></Input>
        </FormItem>
        <FormItem :label="L('Color')"
                  prop="color">
          <ColorPicker v-model="model.color" />
        </FormItem>
        <FormItem :label="L('DisplayOrder')"
                  prop="displayOrder">
          <InputNumber v-model="model.displayOrder"></InputNumber>
        </FormItem>
        <FormItem :label="L('Note')"
                  prop="Note">
          <Input v-model="model.Note"
                 type="textarea"
                 :maxlength="32"></Input>
        </FormItem>
        <FormItem>
          <Checkbox v-model="model.isStatic">{{L('IsStatic')}}</Checkbox>
        </FormItem>
        <FormItem>
          <Checkbox v-model="model.status">启用</Checkbox>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">{{L('Cancel')}}</Button>
        <Button @click="save"
                type="primary">{{L('OK')}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "../../../lib/util";
import AbpBase from "../../../lib/abpbase";
import http from "@/lib/ajax";
@Component
export default class Createmodel extends AbpBase {
  @Prop({ type: Boolean, default: false }) value: boolean;
  model: any = {
    parentId: 0,
    isStatic: 1,
    type: 1,
    key: "",
    value: "",
    displayOrder: 99,
    color: ""
  };
  visibleChange(value: boolean) {
    if (!value) {
      this.$emit("input", value);
    }
  }
  save() {
    (this.$refs.modelForm as any).validate(async (valid: boolean) => {
      let that = this;
      if (valid) {
        http
          .post("/api/services/app/AbpDictionary/Create", this.model)
          .then(r => {
            if (r.data.success) {
              this.$Message.success("Success!");
              that.$emit("save-success");
            }
          });
      } else {
        this.$Message.error("请校验数据");
      }
    });
  }
  cancel() {
    (this.$refs.modelForm as any).resetFields();
    this.$emit("input", false);
  }
  rules = {
    key: [
      {
        required: true,
        message: this.L("FieldIsRequired", undefined, this.L("Key")),
        trigger: "blur"
      }
    ]
  };
}
</script>
<style scoped>
.ivu-form-item {
  margin-bottom: 20px;
}
</style>

